<template>
  <div class="bg">
    <div class="top">广告投放</div>
    <div class="content">
      <ul class="title">
        <li
          v-for="(item, index) in titleList"
          :key="index"
          :class="{ active: upClick == index }"
          @click="toPage(index)"
        >
          {{ item }}
        </li>
      </ul>

      <!-- 投放首页图片 -->
      <!-- <img
        v-if="upClick == 0"
        src="../../assets/marketing/pic_ggtf@2x.png"
        class="image"
        alt=""
      /> -->
      <img v-if="upClick == 0" :src="detail.imageUrl" class="image" alt="" />

      <!-- 平台合作 -->
      <div class="platform" v-else>
        <div class="connect">扫描下方二维码联系客服</div>
        <div class="wechat" :key="item">
          <img :src="qrcode | urlLoad" alt="" class="image" />
          <!-- <span>联系电话：{{ phone }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      upClick: 0,
      titleList: ["投放首页", "平台合作"],
      phone: "",
      detail: {},
      item: "",
      qrcode: "",
    };
  },
  created() {
    // this.connectServices();
    this.putAds();
    this.connectServices();
  },
  methods: {
    toPage(index) {
      sessionStorage.setItem("upClick", index);
      this.upClick = sessionStorage.getItem("upClick");
    },

    // 广告投放
    async putAds() {
      let params = {};
      let res = await this.$apiFun.putAds(params);
      console.log(res.result.configValue);
      this.detail = res.result;
    },

    // 联系客服
    async connectServices() {
      let params = {};
      let res = await this.$apiFun.connectServices(params);
      // this.supportList = res.result.rows;
      if (res.code == 200) {
        this.phone = res.result.hotline;
        this.qrcode = res.result.customerServiceQrCode;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  height: 92.5%;
  background: #fff;
  padding: 30px 50px;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  .top {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    text-align: left;
  }
  .content {
    width: 100%;
    height: 90%;
    margin-top: 40px;

    .title {
      list-style: none;
      display: flex;
      padding-left: 0;
      margin: 0;
      text-align: left;
      li {
        height: 30px;
        // background: #fff;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 30px;
        cursor: pointer;
        margin-right: 60px;
      }
      .active {
        color: #f42551;
        font-weight: bold;
        border-bottom: 4px solid #f42551;
        border-radius: 1px;
      }
    }

    // 投放首页
    .image {
      width: 72.5%;
      // height: 81.5%;
      margin-top: 6%;
      margin-left: 18%;
    }

    // 平台合作
    .platform {
      margin-top: 6%;
      font-family: Microsoft YaHei;
      .connect {
        font-size: 0.22rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        // font-weight: bold;
        color: #333333;
        margin-bottom: 30px;
      }
      .wechat {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
        .image {
          width: 2.8rem;
          height: 2.8rem;
          margin: 0 0 0.3rem 0;
        }
      }
    }
  }
}
</style>